<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
</head>
<body>

<div id="the1" style="border:3px solid #a014cb;margin: 20px;">
    <h1 style="text-align: center">继续教育教学合同</h1>
    <h3>甲方：<h3 id="name"></h3></h3>
    <h3>乙方： 继续教育</h3>
    <h3>签约时间：<h3 id="date"></h3>
    <h4>甲乙两方根据国家有关法律、法规的规定，在平等、自愿、协商一致的基础上签订本合同。</h4>

    <h3>合同目的：</h3>
    乙方对甲方进行系统的培训，帮助甲方制定相关的学习计划和学习内容。</h3>
        <h3>持续时间</h3>
    <h3>教学期限为：<h3 id="time"></h3> 学期</h3>
    <h3>合作费用<h3 name="amount"></h3></h3>
    <h3>甲方需支付乙方总计人民币： <h3 name="amount"></h3>  元</h3>
    <h3>合同终止及解除：</h3>
    <h3>甲、乙双方合同的权利、义务履行完毕时本合同终止。合同受法律制裁导致本合同不能继续履行时亦自行解除。</h3>
    <h3>合同履行过程中，如果甲、乙双方一致认为有必要，可协商解除本合同。</h3>
    <h3>违约责任</h3>
    <h3>    本合同任何一方违约，另一方将给出3天宽限期要求违约方予以改正。<br>
    任何一方两次违约以后，第三次违约行为不再享有宽限期改正，另一方有权解除合同。如违约是甲方，<br>
    乙方可不返还甲方已支付的工作资金；如违约是乙方，甲方可要求乙方返还其已支付的工作资金；同时，<br>
    违约方应给予对方一次性的经济赔偿：其余事项，双方同意参照有关法律法规执行。</h3>
</div>
<div style="width: auto;text-align: right">
    <i class="layui-icon layui-icon-download-circle" style="font-size: 50px; color: #ec0c0c;" onclick="download()"></i>
    <!--    <button style="background: cyan;width: 100px;height: 30px" onclick="download()">下载ptf</button>-->
</div>
</body>
<script>

    layui.use(['form', 'laydate', 'layer'], function () {
        var laydate = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        //加载数据
        Getdatachart();
    });

    function Getdatachart(){
        var name = UrlParm.parm("name");
        $("#name").text(name);
        let dateYear = date.getFullYear();             //获取年
        let dateMonth = date.getMonth();               //获取月
        let dateDate = date.getDate();                 //获取当日
        $("date").text(dateYear+"年"+dateMonth+"月"+dateDate+"日");
    }

    function download(){
        const element = $("#the1"); // 这个dom元素是要导出pdf的div容器
        var w = element.width(); // 获得该容器的宽
        var h = element.height(); // 获得该容器的高
        var offsetTop = element.offset().top; // 获得该容器到文档顶部的距离
        var offsetLeft = element.offset().left; // 获得该容器到文档最左的距离
        const canvas = document.createElement("canvas");
        var abs = 0;
        var win_i = $(window).width(); // 获得当前可视窗口的宽度（不包含滚动条）
        var win_o = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
        if(win_o>win_i){
            abs = (win_o - win_i)/2; // 获得滚动条长度的一半
        }
        canvas.width = w * 2; // 将画布宽&&高放大两倍
        canvas.height = h * 2;
        const context = canvas.getContext("2d");
        context.scale(2, 2);
        context.translate(-offsetLeft-abs,-offsetTop);
        // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
        // translate的时候，要把这个差值去掉
        html2canvas(element[0]).then(function(canvas) {
            const contentWidth = canvas.width;
            var contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28/contentWidth * contentHeight;

            var pageData = canvas.toDataURL('image/jpeg', 1.0);

            var pdf = new jsPDF('', 'pt', 'a4');

            //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围，无需分页
            if (leftHeight < pageHeight) {
                pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            } else { // 分页
                while(leftHeight > 0) {
                    pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                    leftHeight -= pageHeight;
                    position -= 841.89;
                    //避免添加空白页
                    if(leftHeight > 0) {
                        pdf.addPage();
                    }
                }
            }
            pdf.save('继续教育电子合同.pdf');
        })
    }
</script>
</html>